<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/find.css" />
    <script src="./utils/js/index.min.js"></script>
    <title>发现</title>
  </head>
  <body>
    <header>
      <!-- 导航栏 -->
      <nav class="wrapper">
        <!-- 返回按钮 -->
        <a href="./index.html"> <button>Back</button></a>
        <!-- 标题 -->
        <h4>发现</h4>
        <!-- 城市 -->
        <div class="city">
          <select name="城市" id="city">
            <option value="广州市" checked="checked">广州市</option>
            <option value="深圳市">深圳市</option>
            <option value="上海市">上海市</option>
            <option value="北京市">北京市</option>
          </select>
          <i class="iconfont icon-xiangxia"></i>
        </div>
      </nav>

      <!-- 搜索框 -->
      <div class="search">
        <input
          type="search"
          name="搜索"
          id="search"
          placeholder="请输入商品名称"
        />
        <i class="iconfont icon-fangdajing"></i>
      </div>

      <!-- 大家都在搜索 -->
      <div class="all_search">
        <h1>大家都在搜</h1>
        <div class="content">
          <span><a href="javascript:;">寿司</a></span>
          <span><a href="javascript:;">羽毛球</a></span>
          <span><a href="javascript:;">火锅</a></span>
          <span><a href="javascript:;">游泳馆</a></span>
          <span><a href="javascript:;">电影</a></span>
          <span><a href="javascript:;">周黑鸭</a></span>
          <span><a href="javascript:;">KTK</a></span>
          <span><a href="javascript:;">肯德基</a></span>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="wrapper">
      <!-- 热门搜索 -->
      <div class="hot_search">
        <!-- 热门搜索标题 -->
        <div class="label">
          <div class="left">
            <i class="iconfont icon-a-xingzhuang22"></i><span>热门搜索</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 热门搜索内容 -->
        <div class="hot_content">
          <div class="left"><img src="./images/find/图层 1.png" /></div>
          <div class="right">
            <img src="./images/find/图层 2.png" />
            <img src="./images/find/图层 3.png" />
            <img src="./images/find/图层 4.png" />
          </div>
        </div>
      </div>

      <!-- 推荐搜索 -->
      <div class="recommend_search">
        <!-- 推荐搜索标题 -->
        <div class="label">
          <div class="left">
            <i class="iconfont icon-a-xingzhuang14"></i><span>推荐搜索</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <div class="recommend_content">
          <img src="./images/find/图层 5.png" />
          <img src="./images/find/图层 6.png" />
          <img src="./images/find/图层 7.png" />
        </div>
      </div>
    </main>

    <footer>
      <ul>
        <li>
          <a href="./index.html"
            ><i class="iconfont icon-shouye footer_icon"></i
            ><span>首页</span></a
          >
        </li>
        <li>
          <a href="./class.html">
            <i class="iconfont icon-fenlei footer_icon"></i><span>分类</span>
          </a>
        </li>
        <li>
          <a href="./find.html">
            <i class="iconfont icon-a-faxianzhinanzhen footer_icon"></i
            ><span>发现</span>
          </a>
        </li>
        <li>
          <a href="./home.html">
            <i class="iconfont icon-wode footer_icon"></i><span>我的</span>
          </a>
        </li>
      </ul>
    </footer>
  </body>
</html>
